@extends("admin.layout.main")

@section("content")
    <div id="app" style="width: 100%">

        <Modal title="查看大图" v-model="visible" class-name="fl-image-modal">
            <img :src="image" v-if="visible" style="width: 100%">
        </Modal>



        <Modal title="添加店铺" v-model="shopModal" width="30%" class-name="fl-image-modal" @on-ok="addShops">



                <span>
                    店铺名：
                        <i-input v-model="add.shop_name" ></i-input>
                </span>


                <span>
                    主页链接：
                        <i-input type="textarea" v-model="add.url" ></i-input>
                </span>

                 <span>
                     店铺列表：
                    <i-table size="small"   :data="shops" :columns="columns" >
                    </i-table>
                </span>

        </Modal>

        {{--主体代码--}}
        <Row type="flex" justify="center" align="middle">

            <i-col span="24" >
                <span>
                    店铺:
                     <i-select v-model="search.shop_id" multiple style="width:200px">
                         <i-option v-for="shop in shops" :value="shop.shop_id">@{{ shop.shop_name }}</i-option>
                     </i-select>
                </span>
                <span>
                    产品名称:
                     <i-input v-model="search.product_name" style="width:200px"></i-input>
                </span>

                <span>
                     <label>时间 : </label>
                    <span>
                        <Date-Picker type="datetimerange" v-model="date_range" split-panels placeholder="选择时间" style="width: 220px"></Date-Picker>
                    </span>
                </span>

                <span>
                     <i-button type="primary" @click="searchList">搜素</i-button>
                </span>

                <span>
                     <i-button type="error" @click="openShopModal">添加店铺</i-button>
                </span>
            </i-col>

        </Row>
        <Row  justify="center" align="middle" >
            <i-col  style="margin-top: 20px;width: 100%">
                <i-table size="large"  ref="selection" :data="tableData" :columns="tableColumns" >
                </i-table>
            </i-col>
        </Row>

        <Row type="flex" justify="center" class="code-row-bg">
            <i-col>
                <Page
                        size="small"
                        :total="page.total"
                        :current="page.current"
                        :page-size="page.pageSize"
                        show-total
                        show-elevator
                        @on-change="getList">

                </Page>
            </i-col>
        </Row>



    </div>
    <script src="/js/layer/layer.js"></script>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data(){
                return {
                    token: '',
                    shopModal:false,
                    date_range:[],
                    tableColumns: [
                        {
                            title: '产品ID',
                            key: 'product_id',
                            width: 200,
                        },
                        {
                            title: '图片',
                            width: 100,
                            render: (h, params) => {
                                let row = params.row;
                                let imgs = row.image;
                                let image = h('img', {
                                    style: {
                                        'margin': '5px',
                                        'max-width': '50px',
                                        'max-height': '50px',
                                        'cursor': 'pointer',
                                    },
                                    attrs: {
                                        'src': imgs,
                                    },
                                    on:{
                                        click:(e)=>{
                                            this.handleView(imgs)
                                        }
                                    }
                                });
                                return h('div', [image]);

                            }

                        },
                        {
                            title: '产品名称',
                            key: 'product_name',
                        },
                        {
                            title: '价格',
                            key: 'product_price',
                        },
                        {
                            title: '销量',
                            key: 'sell_num',
                        },
                        {
                            title: '采集时间',
                            key: 'created_at',
                        }

                    ],
                    page: {
                        total: 0,
                        current: 1,
                        pageSize: 20,
                    },
                    tableData: [],
                    search: {
                        product_name: '',
                        shop_id: [],
                    },
                    visible:false,
                    image:'',
                    shops:[],
                    add:{
                        shop_id:'',
                        shop_name:'',
                        url:''
                    },
                    columns:[
                        {
                            title: '店铺ID',
                            key: 'shop_id',
                        },
                        {
                            title: '店铺名',
                            key: 'shop_name',
                        },
                        {
                            title: '操作',
                            key: 'option',
                            render: (h, params) => {
                                let row = params.row;
                                let button = h('Button', {
                                    props: {
                                        type:'error'
                                    },
                                    on:{
                                        click:(e)=>{
                                            this.delShop(row)
                                        }
                                    }
                                },'删除');
                                return h('div', [button]);

                            }
                        },
                    ]
                }
            },
            mounted() {
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods:{
                handleView(img){
                    this.image = img;
                    this.visible = true;
                },
                searchList(){
                    this.getList(1);
                },
                getList(page){
                    let start_time = '';
                    let end_time = '';
                    if(this.date_range[0] != ''){
                        start_time = this.turnTimeObjToStr(this.date_range[0]);
                        end_time = this.turnTimeObjToStr(this.date_range[1]);
                    }

                    axios.get('/admin/goods/super_list', {
                        params: {
                            token:vm.token,
                            page: page,
                            pageSize:this.page.pageSize,
                            product_name:this.search.product_name,
                            shop_id:this.search.shop_id,
                            start_time:start_time,
                            end_time:end_time
                        }
                    }).then((response) => {
                        console.log(response.data.data);
                        vm.tableData = response.data.result.data;
                        vm.page.total = response.data.result.total;
                    })
                },
                getShop() {   //  初始化店铺

                    axios.get('/admin/config/get', {
                        params: {
                            token:vm.token,
                            key:'fxg_shops',
                        }
                    }).then((response) => {
                        console.log(response.data.data);
                        if(response.data.result){
                            vm.shops = response.data.result;
                        }else{
                            vm.shops = [];
                        }

                    })

                },
                openShopModal(){
                    this.shopModal = true;
                },
                addShops(){ //添加店铺
                    let str = this.add.url;
                    str = str.split('&');
                    let shop_id = str[0].split('id=')[1];

                    let shop    =   {'shop_id':shop_id,'shop_name':this.add.shop_name,'url':this.add.url};

                    let shops = vm.shops;

                    let status = 0;
                    if(shops.length > 0){
                        shops.map((obj,key)=>{
                            if(obj.shop_id == shop_id){
                                status  =   1;
                                return;
                            }
                        });
                    }


                    if(status == 0){
                        if(this.add.shop_name != ''){
                            shops.push(shop);
                        }


                        axios.post('/admin/config/set', {
                            token:vm.token,
                            key:'fxg_shops',
                            data:JSON.stringify(shops)
                        }).then((response) => {
                            vm.$Message.success('添加成功');
                        })

                    }else{
                        vm.$Message.success('该店铺已存在');
                    }


                },
                delShop(row){

                    vm.shops.map((obj,key)=>{
                        if(obj.shop_id == row.shop_id){
                            vm.shops.splice(key,1);
                        }

                    });



                },
                //根据时间对象获取时间字符串
                turnTimeObjToStr(preDate){
                    var year = preDate.getFullYear();
                    var month = preDate.getMonth()+1;
                    if(month < 10){
                        month = '0'+ month;
                    }
                    var day = preDate.getDate();
                    if(day < 10){
                        day = '0'+ day;
                    }
                    h = preDate.getHours();// 小时
                    m = preDate.getMinutes(); // 分
                    s = preDate.getSeconds(); // 秒

                    if(h < 10){
                        h = '0'+h;
                    }
                    if(m < 10){
                        m = '0'+m;
                    }
                    if(s < 10){
                        s = '0'+s;
                    }
                    let time = year + '-' + month + '-' + day +' '+h+':'+m+':'+s;
                    return time;
                },


            },



        });

        vm.token = getToken();
        vm.getShop();
        vm.getList(1);
    </script>

@endsection

